<template>
  <div class="app-container">
    <div class="container">
      <!--工具栏-->
      <div>
        <el-form ref="query" :inline="true" :model="query" size="small" class="demo-form-inline">
          <el-form-item label="关键词：" prop="name">
            <el-input v-model="query.key_word" clearable placeholder="手机号/微信昵称/姓名/编号" style="width: 180px;" class="filter-item" @keyup.enter.native="toQuery"/>
          </el-form-item>
          <el-form-item label="邀请人：" prop="inviter/customer">
            <el-input v-model="query.key_word_inviter" clearable placeholder="昵称/编号" style="width: 180px;" class="filter-item" @keyup.enter.native="toQuery"/>
          </el-form-item>
          <el-form-item label="创建时间：" prop="last_buy_time">
            <el-date-picker
              v-model="query.last_buy_time"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd HH:mm"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              style="width:360px"/>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
            <el-button size="mini" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 按钮 -->
      <div style="display: flex;float: right;margin: 12px 0 15px;">
        <!-- 导出 -->
        <el-button :loading="downloadLoading" size="mini" class="filter-item" type="warning" icon="el-icon-download" @click="download">导出</el-button>
        <el-button :disabled="$refs.table && $refs.table.selection.length === 0" class="filter-item" size="mini" type="primary" icon="el-icon-set-up" @click="memberTypeClick">变更等级角色</el-button>
        <el-button :disabled="$refs.table && $refs.table.selection.length === 0" class="filter-item" size="mini" type="primary" icon="el-icon-set-up" @click="inviterIdClick(1)">修改邀请人ID</el-button>
      </div>
      <!--修改会员类型-->
      <set-member-type ref="setMemberType"/>
      <!--修改邀请人id-->
      <set-inviter-id ref="setInviterId"/>
      <!--表格渲染-->
      <el-table v-loading="loading" ref="table" :data="data" size="small" style="width: 100%;">
        <el-table-column type="selection"/>
        <el-table-column label="用户编号" prop="user_id"/>
        <el-table-column label="手机号码" prop="phone"/>
        <el-table-column label="微信昵称" prop="nickname" show-overflow-tooltip/>
        <el-table-column label="用户姓名" prop="user_name" show-overflow-tooltip/>
        <el-table-column label="身份证" prop="id_cade"/>
        <el-table-column label="邀请人ID">
          <template slot-scope="scope">
            {{ scope.row.recommend_id > 0 ? scope.row.recommend_id : '' }}
          </template>
        </el-table-column>
        <el-table-column label="邀请人姓名" prop="recommend_name"/>
        <el-table-column label="邀请人等级" prop="recommend_roles">
          <template slot-scope="scope">
            {{ getRoleName(scope.row.recommend_member_type) }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="create_time" show-overflow-tooltip/>
      </el-table>
      <!--分页组件-->
      <el-pagination
        :total="total"
        :current-page="page + 1"
        background
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange"/>
    </div>
  </div>
</template>

<script>
import initData from '@/mixins/initData'
import { downloadCustomer } from '@/api/mall/customer'
import setMemberType from '@/views/chaomall/customer/promoterlist/setMemberType'
import setInviterId from '@/views/chaomall/customer/promoterlist/setInviterId'
import COMMEN from '@/utils/commen'
import { getRoleName } from '@/utils/commen'
import { downloadFile } from '@/utils/index'
import { mapGetters } from 'vuex'

export default {
  components: {
    setMemberType,
    setInviterId
  },
  mixins: [initData],
  data() {
    return {
      pickerOptions: COMMEN.PICKEROPTIONS,
      rolestypes: COMMEN.TYPE_SELECT_ROLE,
      query: {},
      downloadLoading: false
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  destroyed() {
    // 页面销毁事件
    window.localStorage.removeItem('ordinaryList')
  },
  created() {
    // 获取存储的值，通过该值判断该页面有没有做刷新操作，若有做刷新，则跳转首页
    const refresh = window.localStorage.getItem('ordinaryList')
    if (refresh === 'hello') {
      this.$router.push({ path: '/chaomall/home' })
    } else {
      window.localStorage.setItem('ordinaryList', 'hello')
    }
    // 获取员工列表
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    getRoleName,
    beforeunloadFn(e) {
      // 销毁
      window.localStorage.setItem('Refresh', 1)
    },
    beforeInit() {
      this.url = 'api/customer-list'
      this.params = { page: this.page, size: this.size, sort: 'create_time,desc', type: '1' }
      // 查询条件组装
      this.getParam()
      return true
    },
    // 获得检索条件
    getParam() {
      const query = this.query
      const key_word = query.key_word // 关键词
      const key_word_inviter = query.key_word_inviter // 邀请人
      const last_buy_time = query.last_buy_time // 创建时间
      const user_user_id = this.user.user_id // 登录-用户id
      const user_team_id = this.user.team_id // 登录-团队id
      const user_member_type = this.user.member_type // 登录-角色等级

      if (this.isNotBlank(user_user_id)) {
        this.params['user_user_id'] = user_user_id
      }
      if (this.isNotBlank(user_team_id)) {
        this.params['user_team_id'] = user_team_id
      }
      if (this.isNotBlank(user_member_type)) {
        this.params['user_member_type'] = user_member_type
      }

      if (key_word) {
        this.params['key_word'] = key_word
      }
      if (key_word_inviter) {
        this.params['key_word_inviter'] = key_word_inviter
      }
      if (last_buy_time !== '' && last_buy_time !== undefined) {
        this.params['last_buy_time'] = last_buy_time.join('~')
      }
    },
    resetQuery() {
      // 重置筛选框
      this.query.key_word = '' // 关键词
      this.query.key_word_team = '' // 团队
      this.query.key_word_inviter = '' // 邀请人
      this.query.last_buy_time = '' // 创建时间
      this.query.member_type = '' // 角色等级
      // 重新请求数据
      this.init()
    },
    download() {
      // 查询条件集合，因为所有的条件都存于this.params，所以取this.params最精准
      this.getParam()
      // 导出客户列表
      this.downloadLoading = true
      downloadCustomer(this.params).then(result => {
        downloadFile(result, '客户列表', 'xls')
        this.downloadLoading = false
      }).catch(() => {
        this.downloadLoading = false
      })
    },
    getTableSelectId() {
      // 获取表格选中的id
      const dataSelect = this.$refs.table.selection
      const array = []
      for (let i = 0; i < dataSelect.length; i++) {
        array.push(dataSelect[i].user_id)
      }
      return array
    },
    memberTypeClick() {
      if (this.getTableSelectId().length > 1) {
        this.$message({ message: '暂时不支持批量操作等级角色！', type: 'warning' })
        return
      }
      // 修改会员类型
      // 默认选中第一个会员的会员类型
      const dataSelect = this.$refs.table.selection
      this.$refs.setMemberType.form.member_type = dataSelect[0].member_type
      this.$refs.setMemberType.type = dataSelect[0].member_type
      // 弹框弹起
      this.$refs.setMemberType.dialog = true
      // 获取表格所有选中的会员id
      this.$refs.setMemberType.form.ids = this.getTableSelectId()
    },
    inviterIdClick(type) {
      // 邀请人id
      this.$refs.setInviterId.dialog = true
      this.$refs.setInviterId.form.type = type // 修改类型 1：邀请人id  2：团队id
      this.$refs.setInviterId.form.ids = this.getTableSelectId()
    },
    isNotBlank(val) {
      if (val === '' || val === 'undefined' || val === 'null' || val === undefined || val === null) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style scoped>

</style>
